<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation详解</title>
    <style>
      /* 
        关键帧：@keyframes 语法格式
        from：从
        to：来
      */
      /* 写法一 from 相当于 0%  to 相当于 100%*/
      @keyframes writing1 {
        from {
        }
        to {
        }
      }
      /* 写法二 百分比写法，可再细化 */
      @keyframes writing2 {
        0% {
        }
        50% {
        }
        100% {
        }
      }

      @keyframes effect1 {
        0% {
          top: 0px;
          left: 0px;
        }
        25% {
          top: 0px;
          left: 350px;
        }
        50% {
          top: 200px;
          left: 350px;
        }
        75% {
          top: 200px;
          left: 0px;
        }
        100% {
          top: 0px;
          left: 0px;
        }
      }
      .animation_effect1 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid black;
        font-size: 20px;
        text-align: center;
        line-height: 100px;
        position: relative;
        animation-name: effect1;
        animation-duration: 2s;
      }

      @keyframes ball {
        0% {
          left: 0px;
        }
        50% {
          left: 350px;
        }
        100% {
          left: 0px;
        }
      }
      .timingbox {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid black;
        text-align: center;
        line-height: 100px;
        position: relative;
        animation-name: ball;
        animation-duration: 2s;
        /* 简写 */
        /* animation: ball 2s ease; */
      }
      .one {
        margin-top: 200px;
        animation-timing-function: ease;
      }
      .two {
        animation-timing-function: ease-in;
      }
      .three {
        animation-timing-function: ease-out;
      }
      .four {
        animation-timing-function: ease-in-out;
      }

      @keyframes fillMode {
        0% {
          transform: rotate(0);
        }
        50% {
          transform: rotate(0.5turn);
        }
        100% {
          transform: rotate(1turn);
        }
      }

      .fill_mode {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        float: left;
        border: 3px solid black;
        text-align: center;
        line-height: 300px;
        position: relative;
        animation-name: fillMode;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
      }

      @keyframes delay_ball {
        0% {
          left: 0px;
        }
        50% {
          left: 350px;
        }
        100% {
          left: 0px;
        }
      }
      .delay_box {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid black;
        text-align: center;
        line-height: 100px;
        position: relative;
        animation-name: delay_ball;
        animation-duration: 2s;
      }
      .delay_one {
        margin-top: 300px;
        animation-delay: 2s;
      }
      .delay_two {
        animation-delay: -0.5s;
      }

      @keyframes iteration_box {
        0% {
          transform: rotate(0);
        }
        50% {
            /* deg */
          transform: rotate(0.5turn);
        }
        100% {
          transform: rotate(1turn);
        }
      }
      .iteration_one, .iteration_two {
        width: 100px;
        height: 100px;
        float: left;
        border: 3px solid black;
        text-align: center;
        border-radius: 10%;
        line-height: 100px;
        position: relative;
        animation-name: iteration_box;
        animation-duration: 1s;
      }
      .iteration_one {
        animation-iteration-count: 1;
      }
      .iteration_two {
        margin-left: 50px;
        animation-iteration-count: infinite;
      }
    </style>
  </head>
  <body>
    <!-- 同步文档 第三节 -->
    <div class="animation_effect1">effect1</div>
    <div class="one timingbox">ease</div>
    <div class="two timingbox">ease-in</div>
    <div class="three timingbox">ease-out</div>
    <div class="four timingbox">ease-in-out</div>
    <div class="fill_mode">animation-fill-mode</div>
    <div class="delay_one delay_box">2s</div>
    <div class="delay_two delay_box">-0.5s</div>
    <div class="iteration_one">1次</div>
    <div class="iteration_two">infinite</div>
  </body>
</html>
